<template>
  <div class="userDetailsList">
    <el-card shadow="hover">
      <div class="searchBox">
        <el-input
          placeholder="请输入ID"
          v-model="searchId"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g,'')"
        >
          <template slot="prepend">ID</template>
        </el-input>
        <el-button class="btn" @click="getData">查询搜索</el-button>
      </div>
      <!-- 基本信息 -->
      <div class="essentialInformationBox">
        <h4>基本信息</h4>

        <div class="infoBox">
          <div class="infoBoxItem">
            <div>
              <span>头像展示</span>
              <!-- <img
                :src="avatar"
                alt=""
                v-if="avatar !== '' && avatar !== undefined"
              /> -->
              <el-image
                style="width: 120px; height: 120px"
                :src="avatar"
                v-if="avatar !== '' && avatar !== undefined"
                :preview-src-list="[avatar]"
                class="elimg"
              >
              </el-image>
              <img
                src="https://ui-avatars.com/api/?name=无头像&length=3&font-size=0.23"
                alt
                v-else
              />
            </div>
            <div>
              <span>绑定手机</span
              ><el-input
                v-model="mobile"
                placeholder="绑定手机"
                disabled
              ></el-input>
            </div>
            <div>
              <span>注册时间</span
              ><el-input
                v-model="registerDate"
                placeholder="注册时间"
                disabled
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>用户ID</span
              ><el-input v-model="userId" disabled placeholder="用户ID">
                ></el-input
              >
            </div>
            <div>
              <span>用户昵称</span
              ><el-input
                v-model="nickname"
                disabled
                placeholder="用户昵称"
              ></el-input>
            </div>
            <div>
              <span>系统</span
              ><el-input
                v-model="platform"
                disabled
                placeholder="系统"
              ></el-input>
            </div>
            <div>
              <span class="span">最后登录时间</span
              ><el-input
                v-model="loginDate"
                disabled
                placeholder="最后登录时间"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>性别</span>
              <el-radio v-model="sex" label="1" disabled>男</el-radio>
              <el-radio v-model="sex" label="2" disabled>女</el-radio>
              <el-radio v-model="sex" label="0" disabled>其他</el-radio>
            </div>
            <div>
              <span>版本</span
              ><el-input
                v-model="version"
                disabled
                placeholder="版本"
              ></el-input>
            </div>
            <div>
              <span>渠道</span
              ><el-input
                v-model="channel"
                disabled
                placeholder="渠道"
              ></el-input>
            </div>
            <div>
              <span>地区</span
              ><el-input v-model="area" disabled placeholder="地区"></el-input>
            </div>
          </div>
        </div>
      </div>

      <!-- 实名信息 -->
      <div class="essentialInformationBox">
        <h4>实名信息</h4>
        <div class="infoBox">
          <div class="infoBoxItem">
            <div>
              <span>是否实名</span>
              <el-input
                v-model="isRealName"
                disabled
                placeholder="是否实名"
              ></el-input>
            </div>
            <div>
              <span>证件号码</span
              ><el-input
                v-model="IDCard"
                disabled
                placeholder="证件号码"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>出生年月日</span
              ><el-input
                v-model="birthday"
                disabled
                placeholder="出生年月日"
              ></el-input>
            </div>
            <div>
              <span>真实姓名</span
              ><el-input
                v-model="realName"
                disabled
                placeholder="真实姓名"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>实名认证年龄</span
              ><el-input
                v-model="age"
                disabled
                placeholder="实名认证年龄"
              ></el-input>
            </div>
            <div>
              <span>认证日期</span
              ><el-input
                v-model="verifyDate"
                disabled
                placeholder="认证日期"
              ></el-input>
            </div>
          </div>
        </div>
      </div>

      <!-- 第三方账号 -->
      <div class="essentialInformationBox">
        <h4>第三方账号</h4>
        <div class="infoBox">
          <div class="infoBoxItem">
            <div>
              <span>QQ号</span>
              <el-input v-model="qq" disabled placeholder="QQ号"></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>微信号</span
              ><el-input
                v-model="wechat"
                disabled
                placeholder="微信号"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <!-- <div>
              <span>VIP到期时间</span
              ><el-input v-model="input" placeholder="请输入内容"></el-input>
            </div> -->
          </div>
        </div>
      </div>

      <!-- 电量信息 -->
      <div class="essentialInformationBox">
        <h4>电量信息</h4>
        <div class="infoBox">
          <div class="infoBoxItem">
            <div>
              <span>电量数</span
              ><el-input
                v-model="electricity"
                disabled
                placeholder="电量数"
              ></el-input
              ><el-button
                type="warning"
                plain
                icon="el-icon-document"
                class="infoBtn"
                @click="electricityFlowBtn"
                >电量流水</el-button
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 圈子列表 -->
      <!-- <div class="essentialInformationBox">
        <h4>圈子列表</h4>
        <div class="infoBox">
          <div class="infoBoxItem">
            <div>
              <span>加入圈子</span
              ><el-input
                v-model="isJoinRing"
                disabled
                placeholder="加入圈子"
              ></el-input
              ><el-button
                type="primary"
                icon="el-icon-document"
                class="infoBtn"
                @click="circleListBtn"
                >圈子列表</el-button
              > -->
      <!-- v-if="isJoinRing == 1" -->
      <!-- </div>
          </div>
        </div>
      </div> -->

      <!-- 账号状态 -->
      <div class="essentialInformationBox">
        <h4>帐号状态</h4>
        <div class="infoBox">
          <div class="infoBoxItem">
            <div v-if="status == 1">
              <span>状态</span>
              <el-input
                v-model="status1"
                disabled
                placeholder="帐号状态"
              ></el-input>
              <el-button
                type="danger"
                plain
                icon="el-icon-warning-outline"
                class="infoBtn"
                @click="userBanBtn"
                >封禁账号</el-button
              >
              <el-button
                type="info"
                plain
                icon="el-icon-warning-outline"
                class="infoBtn"
                @click="userDelBtn"
                >注销账号</el-button
              >
              <!--  v-if="status == 1" -->
            </div>
          </div>
        </div>
        <div class="infoBox" v-if="status == 2">
          <div class="infoBoxItem">
            <div>
              <span>状态</span>
              <el-input
                v-model="status2"
                disabled
                placeholder="帐号状态"
              ></el-input>
              <!--  v-if="status == 1" -->
            </div>
          </div>
        </div>
        <div class="infoBox" v-if="status === 0">
          <div class="infoBoxItem">
            <div>
              <span>状态</span>
              <el-input
                v-model="statusChinese"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>原因</span>
              <el-input
                v-model="banData[0].reason"
                disabled
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="infoBoxItem">
            <div>
              <span>解封时间</span>
              <el-input
                v-model="unbanDate"
                disabled
                placeholder="解封时间"
              ></el-input>
              <el-button
                type="success"
                icon="el-icon-warning-outline"
                class="infoBtn"
                @click="unsealBtn"
                >立即解封</el-button
              >
              <el-button
                type="info"
                plain
                icon="el-icon-warning-outline"
                class="infoBtn"
                @click="userDelBtn"
                >注销账号</el-button
              >
            </div>
          </div>
          <div class="infoBoxItem"></div>
        </div>
      </div>

      <!-- 电量信息弹框 -->
      <el-dialog
        title="电量流水"
        :visible.sync="dialogTableVisible"
        center
        width="1000"
        style="margin-top: -13vh"
      >
        <div class="p">
          <p :class="{ active: index == 1 }" @click="activeStatusA()">
            获得电量
          </p>
          <p :class="{ active: index == 5 }" @click="activeStatusB()">
            消耗电量
          </p>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="时间"> </el-table-column>
          <el-table-column prop="reason" label="途径"> </el-table-column>
          <el-table-column prop="balance" label="电量流水"> </el-table-column>
        </el-table>
        <pagination
          v-show="totalA > 0"
          :total="totalA"
          :page.sync="pageA"
          :limit.sync="pageSizeA"
          @pagination="getListA"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">返 回</el-button>
        </div>
      </el-dialog>

      <!-- 圈子列表弹框 -->
      <!-- <el-dialog
        title="圈子列表"
        :visible.sync="dialogTableVisibleB"
        center
        width="40%"
        style="margin-top: -13vh"
      >
        <el-table :data="circleTableData" style="width: 100%">
          <el-table-column prop="date" label="加入时间"> </el-table-column>
          <el-table-column prop="name" label="圈子主题"> </el-table-column>
          <el-table-column prop="address" label="圈子标签"> </el-table-column>
        </el-table>
        <pagination
          v-show="totalB > 0"
          :total="totalB"
          :page.sync="pageB"
          :limit.sync="pageSizeB"
          @pagination="getListB"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisibleB = false">返 回</el-button>
        </div>
      </el-dialog> -->

      <!-- 封禁操作 -->
      <el-dialog title="封禁操作" :visible.sync="banDialog" center width="46%">
        <div class="banBox">
          <div class="one">
            <span>用户ID</span
            ><el-input
              disabled
              v-model="banIdInput"
              placeholder="用户ID"
            ></el-input>
          </div>
          <div class="one">
            <span>用户昵称</span
            ><el-input
              disabled
              v-model="banNameInput"
              placeholder="用户昵称"
            ></el-input>
          </div>
          <div class="one">
            <span>违规模块</span>
            <el-radio v-model="banViolationRadio" :label="1">账号封禁</el-radio>
          </div>
          <div class="one">
            <span>选择封禁原因</span>
            <el-radio-group v-model="banReasonRadio">
              <el-radio v-for="i in radioList" :key="i.id" :label="i.id">{{
                i.name
              }}</el-radio>
            </el-radio-group>
          </div>
          <div class="one">
            <span>选择封禁时间</span>
            <el-select v-model="banTimeValue" placeholder="请选择">
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="banDialog = false">取 消</el-button>
          <el-button type="primary" @click="banUser">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="解封操作"
        :visible.sync="unsealDialog"
        center
        width="26%"
      >
        <div class="banBox">
          <div class="one">
            <span>用户ID</span
            ><el-input
              disabled
              v-model="banIdInput"
              placeholder="用户ID"
            ></el-input>
          </div>
          <div class="one">
            <span>用户昵称</span
            ><el-input
              disabled
              v-model="banNameInput"
              placeholder="用户昵称"
            ></el-input>
          </div>
          <div class="one">
            <span>违规模块</span>
            <el-radio v-model="banViolationRadio" label="1">账号封禁</el-radio>
          </div>
          <div class="one">
            <span>封禁原因</span>
            <el-input disabled v-model="reasonsForClosure"></el-input>
          </div>
          <div class="one">
            <span>解封时间</span>
            <el-input
              disabled
              v-model="unbanDate"
              placeholder="解封时间"
            ></el-input>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="unsealDialog = false">取 消</el-button>
          <el-button type="primary" @click="unsealUser">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  userUserDetail,
  userElectricityLog,
  userBan,
  userBanReasonList,
  logoutUser,
} from "@/api/UserManagement";
import Pagination from "@/components/Pagination"; // 分页

export default {
  components: { Pagination },
  inject: ["reload"],
  data() {
    return {
      index: 1,
      //封禁弹框
      banIdInput: "",
      banNameInput: "",
      banViolationRadio: "",
      banReasonRadio: "",
      banTimeValue: "",
      options: [
        {
          value: "1",
          label: "1天",
        },
        {
          value: "3",
          label: "3天",
        },
        {
          value: "7",
          label: "7天",
        },
        {
          value: "0",
          label: "永久",
        },
      ],
      //解封弹框
      reasonsForClosure: "", //原因中文
      reasonsForClosureVal: "", //原因值

      radioList: [],
      searchId: "",
      userId: "", //
      avatar: "", //头像
      nickname: "", //昵称
      sex: "", //1.男 2.女
      version: "", //版本
      mobile: "", //手机号
      role: "", //角色
      platform: "", //系统
      channel: "", //渠道
      registerDate: "", //注册时间
      loginDate: "", //上次登录时间
      isRealName: "", //实名状态
      realName: "", //姓名
      IDCard: "", //身份证
      age: "", //年龄
      verifyDate: "", //认证时间
      birthday: "", //生日
      area: "", //地区
      // isJoinRing: "", //加入圈子

      qq: "", //QQ号
      wechat: "", //微信号
      electricity: "", //电量数
      status: "", //账号状态 0.正常 5.封禁
      statusChinese: "", //账号状态 0.正常 5.封禁
      unbanDate: "", //解封时间
      callCount: "", //通话次数
      status1: "正常",
      status2: "注销",
      banData: [],

      //电量信息弹框
      tableData: [
        {
          id: "",
          date: "",
          reason: "",
          balance: "",
        },
      ],
      dialogTableVisible: false,
      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数

      //圈子列表弹框
      // circleTableData: [
      //   {
      //     date: "2016-05-02",
      //     name: "来喝酒没买醉",
      //     address: "来喝酒",
      //   },
      // ],
      // dialogTableVisibleB: false,
      // totalB: 0,
      // pageB: 1, //页码
      // pageSizeB: 10, //每页条数

      // 封禁弹框
      banDialog: false, //封禁弹框
      unsealDialog: false, //解封弹框
    };
  },
  methods: {
    userUserDetail() {
      if (this.$route.query.id == undefined) {
      } else {
        this.searchId = this.$route.query.id;
        this.getData();
      }
    },
    // search() {
    //   if (this.searchId == "") {
    //     this.$message({
    //       type: "error",
    //       message: "搜索ID不能为空！",
    //     });
    //     return;
    //   }
    //   this.$router.push(`/UserManagement/UserDetailsList?id=${this.searchId}`);
    // },
    getData() {
      if (this.searchId == "") {
        this.$message({
          type: "error",
          message: "搜索ID不能为空！",
        });
        return;
      }
      userUserDetail({
        userId: this.searchId,
      }).then((res) => {
        if (res.code == 0) {
          this.userId = res.data.userId;
          this.searchId = res.data.userId;
          this.avatar = res.data.avatar;
          this.nickname = res.data.nickname;
          this.sex = res.data.sex;
          this.version = res.data.version;
          this.mobile = res.data.mobile;
          this.role = res.data.role;
          this.platform = res.data.platform;
          this.channel = res.data.channel;
          this.registerDate = res.data.registerDate;
          this.loginDate = res.data.loginDate;
          this.isRealName = res.data.isRealName;
          this.realName = res.data.realName;
          this.IDCard = res.data.IDCard;
          this.age = res.data.age;
          this.verifyDate = res.data.verifyDate;
          this.birthday = res.data.birthday;
          this.isVip = res.data.isVip;
          this.vipExpiredTime = res.data.vipExpiredTime;
          this.firstVipTime = res.data.firstVipTime;
          this.qq = res.data.qq;
          this.wechat = res.data.wechat;
          this.diamond = res.data.diamond;
          this.coin = res.data.coin;
          this.status = res.data.status;
          this.statusChinese = res.data.statusChinese;
          this.unbanDate = res.data.unbanDate;
          this.callCount = res.data.callCount;
          // this.isJoinRing = res.data.isJoinRing; //加入圈子
          this.area = res.data.area;
          this.electricity = res.data.electricity; //电量
          this.banData = res.data.banData;

          // if (this.status == 1) {
          //   this.status = "正常";
          // } else {
          //   this.status = "封禁";
          // }
          if (this.isVip == 0) {
            this.isVip = "是";
          } else {
            this.isVip = "否";
          }
          if (this.isRealName == 1) {
            this.isRealName = "是";
          } else {
            this.isRealName = "否";
          }
          // if (this.isJoinRing == 1) {
          //   this.isJoinRing = "是";
          // } else {
          //   this.isJoinRing = "否";
          // }
        }
      });
    },
    //电量流水弹框
    electricityFlowBtn() {
      this.dialogTableVisible = true;
      userElectricityLog({
        userId: this.userId,
        type: this.index, //0.全部 1.获得电量 5.消耗电量
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.totalA = parseInt(res.data.count);
        }
      });
    },
    //获得电量
    activeStatusA() {
      this.index = 1;
      userElectricityLog({
        userId: this.userId,
        type: this.index, //0.全部 1.获得电量 5.消耗电量
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.totalA = parseInt(res.data.count);
        }
      });
    },
    //消耗电量
    activeStatusB() {
      this.index = 5;
      userElectricityLog({
        userId: this.userId,
        type: this.index, //0.全部 1.获得电量 5.消耗电量
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.totalA = parseInt(res.data.count);
        }
      });
    },
    //电量流水弹框分页
    getListA() {
      userElectricityLog({
        userId: this.userId,
        type: this.index, //0.全部 1.获得电量 5.消耗电量
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.totalA = parseInt(res.data.count);
        }
      });
    },

    //圈子列表弹框
    // circleListBtn() {
    //   this.dialogTableVisibleB = true;
    // },
    //圈子列表弹框分页
    // getListB() {},

    //封禁
    userBanBtn() {
      this.banDialog = true;
      this.banIdInput = this.userId;
      this.banNameInput = this.nickname;
      this.banViolationRadio = 1;
      this.banReasonRadio = 1;
      this.banTimeValue = "1";
      userBanReasonList({}).then((res) => {
        if (res.code == 0) {
          this.radioList = res.data;
        }
      });
    },
    banUser() {
      if (
        this.banViolationRadio == "" ||
        this.banReasonRadio == "" ||
        this.banTimeValue == ""
      ) {
        this.$message({
          type: "error",
          message: "选项不能为空！",
        });
        return;
      }
      userBan({
        userId: this.userId,
        type: 5, //1.解封 5.封禁
        banType: this.banViolationRadio,
        reason: this.banReasonRadio,
        day: this.banTimeValue,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "封禁成功",
            type: "success",
          });
          this.banDialog = false;
          this.getData();
        }
      });
    },
    //解封
    unsealBtn() {
      this.unsealDialog = true;
      for (let i = 0; i < this.banData.length; i++) {
        var item = this.banData[i];
        this.banViolationRadio = item.type;
        this.reasonsForClosure = item.reason;
        this.reasonsForClosureVal = item.ban_reason_type; //原因值
        this.banTimeValue = item.ban_days;
      }
      this.banIdInput = this.userId;
      this.banNameInput = this.nickname;
      userBanReasonList({}).then((res) => {
        if (res.code == 0) {
          this.radioList = res.data;
        }
      });
    },
    unsealUser() {
      userBan({
        userId: this.userId,
        type: 1, //1.解封 5.封禁
        banType: this.banViolationRadio,
        reason: this.reasonsForClosureVal,
        day: this.banTimeValue,
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "解封成功！",
            type: "success",
          });
          this.unsealDialog = false;
          this.getData();
        }
      });
    },
    //注销
    userDelBtn() {
      this.$confirm("是否注销该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          logoutUser({ userId: this.userId }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "操作成功！",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  created() {
    this.userUserDetail();
  },
};
</script>

<style lang="less" scoped>
.userDetailsList {
  margin: 30px;
  height: 100%;

  .searchBox {
    display: flex;
    .el-input {
      width: 300px;
      margin-right: 10px;
    }
  }
  .essentialInformationBox {
    .infoBox {
      display: flex;
      justify-content: space-between;
      .infoBoxItem {
        width: 40%;
        div {
          display: flex;
          margin-top: 10px;
          span {
            width: 120px;
            line-height: 60px;
            text-align: center;
          }
          .el-input {
            width: 220px;
          }
          img {
            width: 120px;
            height: 120px;
            border-radius: 4px;
          }
          .elimg {
            border-radius: 4px;
          }
          .infoBtn {
            margin-left: 10px;
            height: 40px;
            margin-top: 10px;
          }
          .el-radio {
            line-height: 60px;
          }
        }
      }
    }
  }
  .el-dialog {
    .p {
      display: flex;
      justify-content: flex-end;
      p {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
    .active {
      background-color: #ec6564;
      color: #fff;
      border-radius: 10px;
    }
    .banBox {
      .one {
        display: flex;
        span {
          width: 120px;
          line-height: 40px;
          font-size: 16px;
          text-align: right;
        }
        .el-input {
          width: 200px;
          margin-left: 20px;
          margin-bottom: 20px;
        }
        .el-radio {
          line-height: 40px;
          margin-left: 20px;
        }
        .el-select {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>